<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<!-- <script type="text/javascript" src='bower_components/react/react.js'></script>
    <script type="text/javascript" src='bower_components/react/react-dom.js'></script>
	<script type="text/javascript" src='bower_components/babel/browser.js'></script> -->
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<!-- 生产环境中不建议使用 -->
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
	<style>
		.div {
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>
</head>

<body>
	<div id='app'></div>
	<script type='text/babel'>
class Title extends React.Component{
	constructor(){
		super();
		this.state = {
			show:'none'
		}
	}
	render(){
		return (<div>
					<input type='button' value='切换' onClick={this.changed.bind(this)}/>
					<br/>
					<div className='div' style={{display:this.state.show}}></div>
				</div>)
	}
	changed(){
		this.setState({
			show:this.state.show=='block'?'none':'block'
		})
	}
}

ReactDOM.render(<Title/>,app);


</script>
</body>

</html>